// 商户中心>运营商
import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Table, Select, message, Card } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { fetchSltOrders, fetchPosList, fetchStoresList } from '@/services/dataCenter/financeData'
import SearchBox from '@/components/SearchBox'

const SettleSheetQuery = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [posList, setPosList] = useState([])
  const [storesList, setStoresList] = useState([])
  const [sltOrders, setSltOrders] = useState([])
  const [total, setTotalPage] = useState(null)
  const [param, setParam] = useState({posSn:"",orderNo:"", pageNo:1, pageSize: 10})
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }


  useEffect(() => {
    _fetchStoresList()
    _fetchPosList()
    init()
  }, [])

  const init = async param => {
    const res = await fetchSltOrders(param)
    if (res.code == 0) {
      setSltOrders(res.data)
      setTotalPage(res.total)
    } else {
      message.warning(res.msg)
    }
  }

  const _fetchStoresList = async () => {
    let param = {
      // supplierId: form.getFieldValue('supplierId'),
      supplierId: 1072,
      pageSize: 999
    }
    const res = await fetchStoresList(param)
    setStoresList(res.data)
  }
  const _fetchPosList = async () => {
    const res = await fetchPosList()
    setPosList(res.data)
  }

  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)
      init({
        ...param,
        ...values,
      })
    })
  }

  const pagination = {
    total: parseInt(total),
    onChange (page) {
      init({
        ...param,
        pageNo: page,
      })
    }
  }

  // 按钮处理
  const handleBtn = type => {

  }

  const columns = [
    {
      title: '结算单号',
      dataIndex: 'settlementNo',
      key: 'settlementNo',
    },
    {
      title: '结算时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: 'POS机编号',
      dataIndex: 'posSn',
      key: 'posSn',
    },
    {
      title: 'POS机名称',
      dataIndex: 'posName',
      key: 'posName',
    },
    {
      title: '总交易额',
      dataIndex: 'totalMoney',
      key: 'totalMoney',
    },
    {
      title: '总支付',
      dataIndex: 'totalPayMoney',
      key: 'totalPayMoney',
    },
    {
      title: '总退款',
      dataIndex: 'totalRefMoney',
      key: 'totalRefMoney',
    },
  ]
  const getFields = () => {
    return (<>
      <Col span={6}>
        <Form.Item label="选择门店" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
          {getFieldDecorator('storeId', {})
            (<Select>
              {storesList && storesList.map((m, i) => <Select.Option key={i} value={m.storeId}>{m.storeName}</Select.Option>)}
            </Select>
          )}
        </Form.Item>
      </Col>
      <Col span={6}>
        <Form.Item label="pos机" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
          {getFieldDecorator('posSn', {})
            (<Select>
              {posList.map((m, i) => <Select.Option key={i} value={m.sn}>{m.posName}</Select.Option>)}
            </Select>
          )}
        </Form.Item>
      </Col>
      <Col span={6}>
        <Form.Item label="结算单号" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
          {getFieldDecorator('orderNo', {})
            (<Input />)}
        </Form.Item>
      </Col>
    </>)
  }
  return (<PageHeaderWrapper>
    <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
    <Card>
      <Table rowKey={record => record.id} pagination={pagination} size="small" columns={columns} dataSource={sltOrders}/>
    </Card>
  </PageHeaderWrapper>)
}

export default Form.create()(SettleSheetQuery)
